Exercicis pràctics p5.js

Exercici 1: Celles que es mouen amb el ratolí

Fes que les celles es moguin en funció de la posició X del ratolí

function setup() {
    createCanvas(200, 200);
}

function draw() {
    background(220);
    
    // Cap
    fill(255, 255, 0);
    ellipse(100, 100, 150, 160);
    
    // Càlcul posició celles
    let moviment = map(mouseX, 0, width, -15, 15);
    
    // Celles
    strokeWeight(3);
    line(70 + moviment, 60, 90 + moviment, 65);
    line(110 + moviment, 65, 130 + moviment, 60);
    
    // Ulls
    fill(0);
    ellipse(80, 80, 25, 25);
    ellipse(120, 80, 25, 25);
}

Exercici 2: Canvi de color en clicar

Canvia el color de la cara quan es fa clic amb el ratolí

let colorCara = 255;

function setup() {
    createCanvas(200, 200);
}

function draw() {
    background(200);
    
    // Cap
    fill(colorCara);
    ellipse(100, 100, 150, 160);
    
    // Ulls
    fill(0);
    ellipse(80, 80, 30, 30);
    ellipse(120, 80, 30, 30);
}

function mousePressed() {
    colorCara = color(random(255), random(255), random(255));
}

Exercici 3: Barret que gira

Crea un barret que gira contínuament sobre el cap

let angle = 0;

function setup() {
    createCanvas(200, 200);
    rectMode(CENTER);
}

function draw() {
    background(220);
    
    // Cap
    fill(255, 200, 150);
    ellipse(100, 100, 150, 160);
    
    // Barret
    push();
    translate(100, 70);
    rotate(radians(angle));
    fill(50, 200, 50);
    rect(0, 0, 100, 30);
    triangle(-40, -15, 40, -15, 0, -40);
    pop();
    
    angle += 2;
}